<main>
    <Topbar></Topbar>

    <Swiper :slides="goods.imgSrc" :height="375"></Swiper>

    <div class="custom-section-box" v-show="isShowMain">

        <section class="custom-characteristic-box">
            <ul>
                <li v-for="(item, index) in goods.characteristicList" :key="index">
                    <div class="custom-img">
                        <img :src="item.picUrl" alt="">
                    </div>
                    <div class="custom-txt">
                        <div v-for="(txt, index) in item.simpleDescList" :key="index">{{txt}}</div>
                    </div>
                </li>
            </ul>
        </section>

        <section class="custom-goods-info-box">
            <div class="custom-goods-info-left">
                <h2>{{goods.name}}</h2>
                <p class="custom-descript">{{goods.descript}}</p>
                <p class="custom-price">￥{{goods.price}}</p>
                <span v-if="goods.itemTagList" v-for="(tag, index) in goods.itemTagList" :key="index"
                    class="tag tag-hollow">
                    {{tag}}<i class="iconfont icon-xiangyou"></i>
                </span>
            </div>
            <div class="custom-goods-info-right">
                <p class="custom-num">{{commentNum}}</p>
                <p>用户评价</p>
                <span class="custom-btn" @click="toggleComment()">查看</span>
            </div>
        </section>

        <section class="custom-flex-list-box">
            <ul>
                <li @click="toggleSpec()">
                    <div class="custom-left">{{activeSkuDes}}</div>
                    <div class="custom-right"><i class="iconfont icon-xiangyou"></i></div>
                </li>
                <li>
                    <div class="custom-left">积分：购买最高得{{pointNum}}积分</div>
                </li>
                <li @click="toggleService()">
                    <div class="custom-left">服务：</div>
                    <div class="custom-mid">
                        <ul>
                            <li v-for="(policy, index) in goods.policyList" :key="index">{{policy.title}}</li>
                        </ul>
                    </div>
                    <div class="custom-right"><i class="iconfont icon-xiangyou"></i></div>
                </li>
            </ul>
        </section>

        <section class="custom-flex-list-box">
            <ul>
                <li @click="toggleComment()">
                    <div class="custom-left">用户评价({{commentNum}})</div>
                    <div class="custom-right">查看全部 <i class="iconfont icon-xiangyou"></i></div>
                </li>
                <li v-for="(item, index) in goods.comments" :key="index" v-if="index === 0">
                    <div class="custom-comment-user">
                        <div class="custom-user-info">
                            <img :src="item.frontUserAvatar" class="custom-portrait" alt="用户头像">
                            <span class="custom-name">{{item.frontUserName}}</span>
                            <span class="custom-star"><i class="iconfont icon-xing" v-for="n in item.star"
                                    :key="n"></i></span>
                        </div>
                        <div class="custom-extra-info">
                            {{item.commentTime}}
                            <span v-for="(sku, index) in item.skuInfo" :key="index">{{sku}}；</span>
                        </div>
                        <p>{{item.content}}</p>
                    </div>
                </li>
            </ul>
        </section>

        <section class="custom-flex-list-box">
            <ul class="custom-attr-list">
                <li>
                    <div class="custom-left">商品参数</div>
                </li>
                <li v-for="(item, index) in goods.attrList" :key="index">
                    <div class="custom-left">{{item.attrName}}</div>
                    <div class="custom-right">{{item.attrValue}}</div>
                </li>
            </ul>
            <section v-html="goods.detailHtml"></section>
            <section class="custom-mod" v-if="goods.reportCheck">
                <div class="custom-mod-hd">
                    <span class="custom-mod-tit">质检报告</span>
                </div>
                <div class="custom-mod-bd">
                    <img :src="goods.reportCheck" class="reportcheck" alt="质检报告">
                </div>
            </section>
            <section class="custom-mod">
                <div class="custom-mod-hd">
                    <span class="custom-mod-tit">常见问题</span>
                </div>
                <div class="custom-mod-bd">
                    <ul class="custom-dot-list custom-question-list">
                        <li v-for="(item, index) in goods.issueList" :key="index">
                            <p class="custom-question" v-html="item.question"></p>
                            <p v-html="item.answer"></p>
                        </li>
                    </ul>
                </div>
            </section>
        </section>
    </div>

    <!--规格面板-->
    <transition name="custom-slide" mode="out-in">
        <section class="custom-panel" v-show="isShowSpec">
            <div class="custom-panel-bd custom-spec-box">
                <div class="custom-spec-hd">
                    <img :src="activeSkuPic === '' ? goods.skuImg : activeSkuPic" alt="">
                    <div class="custom-txt">
                        <p class="custom-price">价格：￥{{activeSkuPrice === '' ? goods.price : activeSkuPrice}}</p>
                        <p>已选择：<span>{{activeSkuSelect}}</span></p>
                    </div>
                </div>
                <ul class="custom-spec-list">
                    <li v-for="(item, itemIndex) in skuMap" :key="itemIndex">
                        <h4>{{item.name}}</h4>
                        <div><span v-for="(tag, index) in item.list" :key="index" @click="tagVal($event,itemIndex)"
                                :class="[activeSkuVal[itemIndex] === tag ? 'active' : '','tag tag-hollow']">{{tag}}</span>
                        </div>
                    </li>
                    <li>
                        <h4>数量</h4>
                        <div class="custom-count">
                            <span @click="countGoodsNumber(false)">-</span>
                            <input type="number" value="1" v-model="goodsNumber" />
                            <span @click="countGoodsNumber(true)">+</span>
                        </div>
                    </li>
                </ul>
            </div>

            <footer class="custom-footer-box">
                <div class="custom-footer-content">
                    <div class="custom-back" @click="toggleSpec()">返回</div>
                    <div class="custom-buy">
                        <div class="custom-button" @click="toggleSpec()">立即购买</div>
                    </div>
                    <div class="custom-cart">
                        <div class="custom-button" @click="addCart('sku')">加入购物车</div>
                    </div>
                </div>
            </footer>
        </section>
    </transition>

    <!--评论面板-->
    <transition name="custom-slide" mode="out-in">
        <section class="custom-panel custom-comment-list" v-show="isShowComment">
            <div class="custom-panel-hd"><span class="tag tag-hollow">全部({{commentNum}})</span></div>
            <div class="custom-panel-bd">
                <ul>
                    <li v-for="(item, index) in goods.comments" :key="index">
                        <div class="info custom-comment-user">
                            <div class="custom-user-info">
                                <img :src="item.frontUserAvatar" class="custom-portrait" alt="用户头像">
                                <span class="custom-name">{{item.frontUserName}}</span>
                                <span class="custom-star"><i class="iconfont icon-xing" v-for="n in item.star"
                                        :key="n"></i></span>
                            </div>
                            <div class="custom-extra-info">
                                {{item.commentTime}}
                                <span v-for="(sku, index) in item.skuInfo" :key="index">{{sku}}；</span>
                            </div>
                            <p>{{item.content}}</p>
                        </div>
                    </li>
                </ul>
                <div class="flex custom-panel-ft">
                    <div class="custom-info" @click="toggleComment()">返回</div>
                </div>
            </div>
        </section>
    </transition>

    <!--服务面板-->
    <transition name="custom-slide" mode="out-in">
        <section class="custom-panel " v-show="isShowService">
            <div class="custom-panel-hd">服务</div>
            <div class="custom-panel-bd">
                <ul class="custom-dot-list custom-question-list">
                    <li v-for="(policy, index) in goods.policyList" :key="index">
                        <p class="custom-question">{{policy.title}}</p>
                        <p v-if="policy.content">{{policy.content}}</p>
                        <p v-if="policy.distributionArea">不支持省份：<span
                                v-for="(area, index) in policy.distributionArea.provinceList"
                                :key="index">{{area}}</span></p>
                    </li>
                </ul>
            </div>
            <div class="flex custom-panel-ft">
                <div class="custom-info" @click="toggleService()">返回</div>
            </div>
        </section>
    </transition>

    <aside>
        <Gotop></Gotop>
    </aside>

    <footer class="custom-footer-box">
        <div class="custom-footer-content">
            <div class="custom-kefu"><i class="iconfont icon-kefu"></i></div>
            <div class="custom-buy">
                <div class="custom-button" @click="toggleSpec()">立即购买</div>
            </div>
            <div class="custom-cart">
                <div class="custom-button" @click="addCart()">加入购物车</div>
            </div>
        </div>
    </footer>

</main>